<template>
  <div class="Write">
    <div class="Write_major">
      <div class="name_lists_header">
        <router-link to="/ChooseSchool" tag="div" class="Choose_Major">
          <i class="el-icon-close"></i>
          <span>请将您想上的专业添加入备选</span>
        </router-link>
      </div>
      <div class="schools_name">北京大学</div>
      <div class="name_lists_bottom">
        <div class="lists_bottom">
          <ul>
            <li>
              <div class="lists_bottom_left">
                <h3>电子信息类</h3>
                <div class="lists_bottom_left_bottom">
                  <p>
                    18年录取最低排名
                    <span>788880</span>
                  </p>
                  <p>
                    18年招生人数
                    <span>78</span>
                  </p>
                  <p>
                    18年录取最低分
                    <span>554</span>
                  </p>
                </div>
              </div>
              <div class="lists_bottom_button">
                <el-button type="primary">
                  <i class="el-icon-plus"></i> 备选专业
                </el-button>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" >
.Write {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba($color: #000000, $alpha: 0.4);
  z-index: 1100;
  .Write_major {
    width: 480px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    height: 550px;
    margin: 0 auto;
    margin-top: 30px;
    .schools_name {
      color: #757575;

      background: #f8f8f8;
      padding: 12px 18px;
    }
    .name_lists_header {
      padding-top: 34px;
      .Choose_Major {
        padding: 0 18px;

        span {
          font-size: 18px;
          padding: 12px 0;
        }
        i {
          color: #c8c8c8;
          font-size: 20px;
          padding: 12px 12px;
        }
      }
    }
    .name_lists_bottom {
      width: 100%;
      height: 100%;
      overflow: auto;
      padding-right: 50px;

      .lists_bottom {
        height: 1400px;
        width: 200px;
        > ul {
          li {
            display: block;
            width: 340%;
            display: flex;
            padding-left: 44px;
            padding-top: 26px;
            padding-bottom:10px; 
            border-bottom: 8px #f8f8f8 solid;
            .lists_bottom_left {
              width: 280px;
              h3 {
                line-height: 28px;
                padding-bottom: 14px;
              }
              .lists_bottom_left_bottom {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap-reverse;
                font-size: 10px;
                color: #757575;
                p {
                  line-height: 26px;
                  span {
                    color: #414141;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>